<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" href="js/datetimepicker/jquery.datetimepicker.css" />
	</head>
	<body>

		<div class="container">
		
			<h2 class="page-header">修改课程信息</h2>
			
			<form id="form1" class="form-horizontal" enctype="multipart/form-data">
				<div class="form-group">
					<label for="" class="col-sm-2" style="color: white;">选择图片</label>
					<div class="col-sm-8">
						<input type="file" id="file" name="file" placeholder="请选择图片文件" class="form-control" />
					</div>
				</div>
			
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<input type="hidden" id="sourseId" name="sourseId" />
						<input type="button" value="修改" id="updateBtn" class="btn btn-success" />
						<input type="button" value="取消" class="btn btn-warning" onclick="window.parent.layer.closeAll()" />
					</div>
				</div>
				<!--进度条-->
				<div class="form-group">
					<div class="progress" id="progress" style="display: none;">
						<div id="son" class="progress-bar progress-bar-success progress-bar-striped active" style="width: 0%;">
							0%
						</div>
					</div>
				</div>
				<!-- 预览图片  -->
				<img src="" id="previewImg" class="img-responsive" />
			</form>
		</div>
			
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/global.js"></script>
		<script type="text/javascript" src="js/bootstrap/js/bootstrap.js"></script>
		<script type="text/javascript" src="js/layer/layer.js"></script>
		<script type="text/javascript" src="js/datetimepicker/jquery.datetimepicker.js"></script>
		<script type="text/javascript" src="js/param.js"></script>
		<script>
		
			$(function() {
				
				//获得员工信息
				var sourseId = getParam('sourseId');
			
				//获得员工数据的数据模型中数组下标
				var index = getParam('index');
			
				$.getJSON(baseUrl + '/sourse/get', {
						sourseId: sourseId
					}, function(data) {
						$('#previewImg').attr('src', data.sourseImg);
						$('#sourseId').val(data.sourseId);
			
					})
					.error(function() {
						layer.msg('网络请求失败');
					});
						
				$('#file').change(function(e) {
			
					var img = this.files[0];
					//					alert(file.type);
					//判断文件是否是图片
					if (img.type.match(/image/) == null) {
						//用户选择的不是一个图片文件
						layer.msg('请选择一个图片文件');
						//清空文件域的内容
						this.value = '';
						return false;
					}
			
					//判断图片的大小，图片不允许超过1M
					if (img.size > 1 * 1024 * 1024) {
						layer.msg('图片的大小不能超过1M');
						//清空文件域的内容
						this.value = '';
						return false;
					}
			
					//获得文件读取对象
					var fr = new FileReader();
					//读取文件内容
					fr.readAsDataURL(img);
			
					//异步读取文件内容，读取文件完毕之后 会触发onload
					fr.onload = function() {
						console.log(this.result);
						//显示图片
						$('#previewImg').attr('src', this.result);
					}
				});
			
				/*验证表单函数*/
				function checkForm() {
					var img = $('#file').get(0).files;
					if (img.length == 0) {
						layer.msg('请选择上传图片作为的课程视频封面');
						$('#file').focus();
						return false;
					}
					
					return true;
				}
				//上传按钮的单击事件
				$('#updateBtn').click(function() {
					if (!checkForm()) {
						return;
					}
					//显示上传的进度条
					$('#progress').show();
					//发送ajax请求
					//文件对象
					var img = $('#file').get(0).files[0];
					// 创建FormData对象（表单数据）
					var formData = new FormData();
			
					// 添加数据字段到FormData
					formData.append('sourseId', $('#sourseId').val());
					// 添加数据字段到FormData
					formData.append('file', img);
					
					//异步请求
					$.ajax({
							url: baseUrl + '/sourse/updatePic',
							type: 'POST',
							data: formData,
							processData: false, //一定设置false
							contentType: false, //一定设置false
							//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
							　　　xhr: function() {　　　　　　
								var xhr = $.ajaxSettings.xhr();
			
								　　　　　　
								if (onprogress && xhr.upload) {　　　　　　　　
									xhr.upload.addEventListener("progress", onprogress, false);　　　　　　　　
									return xhr;　　　　　　
								}　　　
							}
						})
						.done(function(data) {
							layer.msg("上传课程成功！");
							//修改前端员工数据
								var sourse = window.parent.vue.sourseData[index];
			
								sourse.sourseId = sourseId;
								sourse.sourseImg = $("#previewImg").attr("src");
//								sourse.sourseName = $('#sourseName').val();
//								sourse.sourseIntro = $('#sourseIntro').val();
//								sourse.job.jobName = $('#jobId option:selected').text();
								setTimeout(function() {
									window.parent.layer.closeAll();
								}, 500);
						})
						.fail(function(xhr) {
							layer.msg("请求失败，" + xhr.status);
						});
			
					/**
					 * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
					 */
					function onprogress(evt) {
						var loaded = evt.loaded; //已经上传大小情况 
						var tot = evt.total; //附件总大小 
						var per = Math.floor(100 * loaded / tot); //已经上传的百分比 
						$("#son").html(per + "%");
						$("#son").css("width", per + "%");
					}
			
				});
			});
		</script>

	<body>
<html>
